<template>
    <div class="userinfo">
        <div class="userTop">
            <span class="iconfont icon-direction-left left" @click="back()"></span>
            <i>{{userInfo.profile.nickname}}</i>
            <!-- <span class="iconfont icon-fenxiang right"></span> -->
        </div>
        <div class="userToplist">
            <div class="img">
                <img :src="userInfo.profile.avatarUrl" alt="">
            </div>
            <div class="rightbox">
                <div class="infobox">
                    <ul>
                        <li>
                            <div class="num">{{userInfo.profile.followeds}}</div>
                            <div class="text">粉丝</div>
                        </li>
                        <li>
                            <div class="num">{{userInfo.profile.follows}}</div>
                            <div class="text">关注</div>
                        </li>
                        <li>
                            <div class="num">Lv.{{userInfo.level}}</div>
                            <div class="text">等级</div>
                        </li>
                    </ul>
                </div>
                <div>
                    <div class="editinfo">编辑信息</div>
                </div>
            </div>
        </div>
        <div class="basicinfo">
            <div class="infobox">
            <h3>基本信息</h3>
            <div>村龄：<span>{{userInfo.createDays | dayNum}}</span></div>
            <div>性别：<span>男</span></div>
            <div>地区：<span>广东广州</span></div>
            </div>          
            <div class="full">查看全部<span class="iconfont icon-arrow-right"></span></div>
        </div>
        <div class="songlist">
            <h3>我的歌单</h3>
            <div class="songbox" @click="golike()">
            <div class="img" :style="{'background-image':'url('+likelist[0].coverImgUrl+')'}">
                <!-- <img :src="likelist[0].coverImgUrl" alt=""> -->
            </div>
            <div class="info">
                <div class="singername">{{likelist[0].name}}</div>
                <div class="songcount">{{likelist[0].trackCount}}首</div>
            </div>
            </div> 
            <router-link tag="div" class="songbox" v-for="(item,index) in songlist" :key="index" :to="{path:'/recommendlist',query:{id:item.id}}">
            <div class="img" :style="{'background-image':'url('+item.coverImgUrl+')'}">
                <!-- <img :src="item.coverImgUrl" alt=""> -->
            </div>
            <div class="info">
                <div class="singername">{{item.name}}</div>
                <div class="songcount">{{item.trackCount}}首</div>
            </div>
            </router-link>  
        </div>
    </div>
</template>
<script>
import {getUserDetail,getUserPlaylist,getLoginStatus,getLikeList} from '../api/user.js'
import {getSongDetail} from '../api/base.js'
export default {
    data() {
        return {
            userId:"",
            userInfo:{
                profile:{nickname:""}
            },
            songlist:{},
            likelist:[{
                coverImgUrl:null
            }],
            lists:[],
            idlist:[]
        }
    },
    methods: {
        golike(){
            this.$router.push({path: '/likelist', query: {lists:this.lists}});
        },
        back(){
                this.$router.go(-1);
            },
            getLoginStatusFun(){
                getLoginStatus().then(data=>{
                    console.log(data);
                })
            },
            getUserDetailFun(){
                getUserDetail({
                    uid:this.userId
                }).then(data=>{
                    // console.log(data);
                    this.userInfo = data;
                })
            },
           getUserPlaylistFun(){
            //    console.log(encodeURIComponent(document.cookie));
               getUserPlaylist({
                   uid:this.userId,
                   limit:5
               }).then(data=>{
                    // console.log(data);
                    this.songlist = data.playlist;
                    this.likelist = this.songlist.splice(0,1);
                })
            },
            getLikeListFun(){
            let id = window.localStorage.getItem("userId");
        getLikeList({uid:id,cookie:document.cookie}).then(data=>{
            // console.log(data);
            this.idlist = data.ids;
            this.getSongDetailFun();             
        })
    },
        getSongDetailFun(){
            this.idlist.forEach(item=>{
                getSongDetail({
                ids:item
            }).then(data=>{
                this.lists.push(data.songs);
            })
            })
        //    console.log(this.lists);
        }
    },
    created() {
        this.userId = window.localStorage.getItem("userId");
    },
    mounted() {
        this.$nextTick(()=>{
            this.getUserDetailFun();
            this.getUserPlaylistFun();
            this.getLoginStatusFun();
            this.getLikeListFun();
        })
    },
    filters:{
        dayNum(value){
            // console.log(value>365)            
            let num = value > 365? parseInt(value/365)+"年" : value+"天";
            return num;
        }
    }
}
</script>
<style lang="less">
.main{
    background-color: rgb(245,245,245);
}
.userinfo{
    background-color: rgb(245,245,245);
}
.songlist{
    width: 92%;
    margin: 10px auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
    padding-top: 16px;
    h3{
        text-indent: 10px;
        margin-bottom: 10px;
    }
    .songbox{
        display: flex;
        margin-bottom: 10px;
        margin-left: 10px;
        padding-bottom: 10px;
        .img{
            flex: 0 0 50px;
            height: 50px;
            border-radius: 10px;
            margin-right: 10px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            // img{
            //     width: 100%;
            //     height: 100%;
            //     border-radius: 10px;
            // }
            
        }
        .info{
            .singername{
                color: rgb(102,143,186);
                font-size: 12px;
            }
            .songcount{
                color: rgb(170,170,170);
                font-size: 10px;
            }
        }
    }
    }
.userTop{
    background-color: rgb(245,245,245);
    width: 100%;
    height: 40px;
    display: flex;
    position: fixed;
    line-height: 40px;
    padding: 0 6px;
    // border: 1px solid transparent;
    .left,.right{
        color: black;
        font-size: 20px;
        flex: 0 0 40px;
    }
    i{
        font-weight: bold;
        font-size: 18px;
        font-style:normal;
        flex: 1;
    }   
}
.userToplist{
    padding-top: 40px;
    display: flex;
    .img{
            flex:0 0 110px;
            text-align: center;
            img{
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin:10px auto;              
            }
        }
    .rightbox{
        flex: 1;
        .infobox{
            ul{
                display: flex;
                li{
                    flex: 0 0 33%;
                    .num{
                        font-size: 12;
                        color: #000;
                        font-weight: bold;
                        margin-bottom: 6px;
                        text-align: center;
                    }
                    .text{
                        font-size: 10px;
                        color: rgb(160,159,157);
                        text-align: center;
                    }
                }
            }
        }
        .editinfo{
            border: 1px solid rgb(231,231,229);
            border-radius: 40px; 
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: rgb(132,132,129);
            margin-right: 6%;
            margin-left: 6%;
            margin-top: 10px;
            cursor: pointer;
        }
    }
}
.basicinfo{
    height: 200px;
    width: 92%;
    margin: 10px auto;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 14px;
    padding-top: 16px;
    .infobox{
       margin-left: 16px;
       h3{
           margin-bottom: 16px;
           font-weight: bold;
       } 
       div{
           margin-bottom: 16px;
           color: rgb(161,161,161);
           font-size: 12px;
           span{
               color: rgb(136,136,136);
           }
       }
    }
    .full{
        border-top: 1px solid rgb(247,247,247);
        font-size: 12px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: rgb(161,161,161);
        span{
            font-size: 14px;
        }
    }
}
</style>